import 'package:flutter/material.dart';

/// 根据方向设定GridView条目
/// 1. 创建GridView
/// 2. 使用OrientationBuilder改变条目
class UpdateOrientationApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Update Orientation Demo',
      theme: ThemeData(primarySwatch: Colors.red),
      home: UpdateOrientationAppPage(),
    );
  }
}

class UpdateOrientationAppPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => UpdateOrientationAppPageState();
}

class UpdateOrientationAppPageState extends State<UpdateOrientationAppPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Update Orientation Demo"),
      ),
      body: OrientationBuilder(builder: (context, orientation) {
        return GridView.count(
          // 竖屏2个条目，横屏3个条目
          crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
          children: List.generate(100, (index) {
            return Center(
              child: Text('Item $index',
                  style: Theme.of(context).textTheme.headline),
            );
          }),
        );
      }),
    );
  }
}
